<template>
    <div class="books">
        <van-nav-bar
            left-text="返回"
            title="数据报表"
            left-arrow
            @click-left="onClickLeft"

        />
        <div class="box">
                <div class="left">
                    <p>169</p>
                    <span>图书总数</span>
                    <p>2(1%)</p>
                    <span>图书总数</span>
                    <p>69</p>
                    <span>图书总品类</span>

                </div>
                <div class="right">
                    <p>167</p>
                    <span>在库数量</span>
                     <p>0(0%)</p>
                    <span>超期数量</span>
                </div>
        </div>
        <div class="num">
            <p style="text-align: center;">超期数量统计</p>
            
        </div>
        <div class="main"></div>
        <main id="echarts"> </main>

        <Test />
    </div>
    
</template>

<script setup  lang="ts">

import { useRouter } from 'vue-router';

import { onMounted, ref } from 'vue';
import Test from "./test.vue"
let $router = useRouter()
function onClickLeft() {
    $router.back()
}



</script>

<style scoped lang="less">
.books {
    width: 100%;
    height: 100%;
}

.van-nav-bar {
    background-color: #4fc08d
}
.box{
    width:300px;
    height:200px;
    background-color:#4fc08d;
    margin:10px auto; 
    border-radius: 30px;
    padding:10px;
    display:flex;
    justify-content:space-around;
    color:#fff;
    .left {
        p{
    text-align: center;
            font-size: 20px;
            margin: 8px 0;
            
        }

    }
    .right {
        p{
    text-align: center;
            font-size: 20px;
            margin: 8px 0;
        }
    }
 
}
#echars{
    height: 300px;

}
</style>